<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MediaElement.js 3.0 - audio/video unification library</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <link rel="stylesheet" href="build/mediaelementplayer.css">

    <style>

        html, body {
            overflow-x: hidden;
        }

        #container {
            padding: 0 20px 50px;
        }
        .error {
            color: red;
        }
        a {
            word-wrap: break-word;
        }

        code {
            font-size: 0.8em;
        }

        #player2-container .mejs__time-buffering, #player2-container .mejs__time-current, #player2-container .mejs__time-handle,
        #player2-container .mejs__time-loaded, #player2-container .mejs__time-hovered, #player2-container .mejs__time-marker, #player2-container .mejs__time-total {
            height: 2px;
        }

        #player2-container .mejs__time-total {
            margin-top: 9px;
        }
        #player2-container .mejs__time-handle {
            left: -5px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #ffffff;
            top: -5px;
            cursor: pointer;
            display: block;
            position: absolute;
            z-index: 2;
            border: none;
        }
        #player2-container .mejs__time-handle-content {
            top: 0;
            left: 0;
            width: 12px;
            height: 12px;
        }
    </style>
</head>

<body>

<div id="container">
    <section>
        <h1>MediaElement.js</h1>
        <h2><em>audio/video</em> unification library</h2>
    </section>

    <section>
        <h3>Global Options</h3>
        <form action="#" method="get">
            <label>Language <select name="lang">
                <option value="en">English (en)</option>
                <option value="zh">繁体中文 / Traditional Chinese (zh-TW)</option>
                <option value="zh-CN" selected>简体中文 / Simplified Chinese (zh-CN)</option>
            </select>
            </label>
            <label>Stretching (Video Only)<select name="stretching">
                <option value="auto" selected>Auto (default)</option>
                <option value="responsive">Responsive</option>
                <option value="fill" selected>Fill</option>
                <option value="none" selected>None (original dimensions)</option>
            </select>
            </label>
        </form>
    </section>

    <br>
    <div class="players" id="player1-container">

        <h3>Video Player</h3>

        <div class="media-wrapper">
            <video id="player1" width="640" height="360" style="max-width:100%;" poster="http://oss.tinywan.com/uploads/20171018/fd5a8fd33590f731ff453c8066a1e8e0.png" preload="none" controls playsinline webkit-playsinline>
                <source src="https://openresty.org/download/videos/openresty-con-2017-v2.mp4" type="video/mp4">
                <track srclang="en" kind="subtitles" src="mediaelement.vtt">
                <track srclang="en" kind="chapters" src="chapters.vtt">
            </video>
        </div>
        <br>
        <div>
            <label>Sources <select name="sources">
                <option value="https://openresty.org/download/videos/openresty-con-2017-v2.mp4">MP4</option>
                <option value="http://ep-lin-upload.s3.amazonaws.com/vupl_lin/F64/CDF/F64CDF3B0348471E95C244DE2DDDD3F3">MP4 (no ext.)</option>
                <option value="https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm">WebM</option>
                <!--<option value="rtmp://184.72.239.149/vod/BigBuckBunny_115k.mov">RTMP</option>-->
                <!--<option value="rtmp://firehose.cul.columbia.edu:1935/vod/mp4:sample.mp4">RTMP</option>-->
                <option value="https://yunqivedio.alicdn.com/2017yq/v2/0x0/a999f0f8f54d79c1f5e0c68cab7e1903/a999f0f8f54d79c1f5e0c68cab7e1903.m3u8">HLS</option>
                <option value="http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8">HLS 2</option>
                <!--<option value="http://dash.edgesuite.net/envivio/EnvivioDash3/manifest.mpd">M(PEG)-DASH 1</option>-->
                <option value="http://www.bok.net/dash/tears_of_steel/cleartext/stream.mpd">M(PEG)-DASH</option>
                <option value="http://la2.indexcom.com/me/flv/guqin.flv">FLV</option>
                <option value="https://www.dailymotion.com/video/x11prnt">DailyMotion</option>
                <option value="https://www.youtube.com/watch?v=twYp6W6vt2U">YouTube</option>
                <option value="https://player.vimeo.com/video/108018156?title=0&amp;byline=0&amp;portrait=0&amp;badge=0">Vimeo</option>
                <option value="https://www.facebook.com/facebook/videos/10155278547321729">Facebook</option>
                <option value="https://www.twitch.tv/videos/109010497">Twitch</option>
            </select>
            </label>
        </div>
        <br>
        <div class="player-info">
            <div id="player1-rendername">
                <p><strong>当前视频源：</strong>: <span class="src"><a href="https://commondatastorage.googleapis.com/gtv-videos-bucket/CastVideos/mp4/BigBuckBunny.mp4" target="_blank">https://commondatastorage.googleapis.com/gtv-videos-bucket/CastVideos/mp4/BigBuckBunny.mp4</a></span></p>
                <p><strong>Renderer</strong>: <span class="renderer">html5</span></p>
                <p class="error"></p>
            </div>
        </div>
    </div>
</div>

<script src="build/mediaelement-and-player.js"></script>
<script src="build/renderers/twitch.js"></script>
<script src="build/lang/zh-cn.js"></script>
<script src="demo.js"></script>
</body>
</html>